import React, { useState } from 'react';
import { DatePicker, message } from 'antd';
import locale from 'antd/es/date-picker/locale/zh_CN';
import moment from 'moment';

const DatePage = () => {
  const [startDates, setStartDates] = useState('');
  const [endDates, setEndDates] = useState('');
  // const [open, setOpen] = useState(false);

  const disabledDate = (current: any) => {
    const disableStartTime = startDates ? current.isBefore(startDates) : true;
    const disableEndTime = endDates ? current.isAfter(endDates) : true;
    return disableStartTime || disableEndTime;
  };

  const onOpenChange = (value: boolean) => {
    if (value && (!startDates || !endDates)) {
      message.info('请选择禁选日期');
    } else {
      // setOpen(true);
    }
  };

  return (
    <div>
      <DatePicker
        placeholder="请选择日期"
        // open={open}
        locale={locale}
        showToday={false}
        disabledDate={disabledDate}
        onOpenChange={(value: boolean) => onOpenChange(value)}
      />
      <DatePicker
        placeholder="请选择限制开始时期"
        locale={locale}
        showToday={false}
        onChange={(time: any) => {
          setStartDates(time);
        }}
      />
      <DatePicker
        placeholder="请选择限制结束时期"
        locale={locale}
        showToday={false}
        onChange={(time: any) => {
          setEndDates(time);
        }}
      />
    </div>
  );
};

export default DatePage;
